<script setup lang="ts">
import {ElMessage, type UploadProps} from "element-plus";
import {Plus} from '@element-plus/icons-vue'
import {reactive, ref} from "vue";
import api from "@/api";
import RectImage from "@/components/RectImage.vue";

let rectImgA = ref()
let rectImgB = ref()
let display = ref(false)
let textA = ref([''])
let textB = ref([''])


let faceCompareInfo = reactive({
  faceScoreThreshold: 0,
  imageBase64A: "",
  imageBase64B: "",
  needFaceInfo: true
})

let compareResult = reactive({
  confidence: 0,
  distance: 0,
  faceInfo: {
    faceScoreA: 0,
    faceScoreB: 0,
    locationA: {h: 0, w: 0, x: 0, y: 0},
    locationB: {h: 0, w: 0, x: 0, y: 0},
  }
})





const beforeAvatarUploadA: UploadProps['beforeUpload'] = (rawFile) => {
  // 匹配rawFile 的类型是否是image
  if (!rawFile.type.includes('image')) {
    ElMessage.error('上传文件必须是图片')
    return false
  }
  const reader = new FileReader()
  reader.onload = function (e) {
    typeof reader.result === "string" ? faceCompareInfo.imageBase64A = reader.result : faceCompareInfo.imageBase64A = ''
  }
  reader.readAsDataURL(rawFile)
  return true
}
const beforeAvatarUploadB: UploadProps['beforeUpload'] = (rawFile) => {
  // 匹配rawFile 的类型是否是image
  if (!rawFile.type.includes('image')) {
    ElMessage.error('上传文件必须是图片')
    return false
  }
  const reader = new FileReader()
  reader.onload = function (e) {
    typeof reader.result === "string" ? faceCompareInfo.imageBase64B = reader.result : faceCompareInfo.imageBase64B = ''
  }
  reader.readAsDataURL(rawFile)
  return true
}

const compareInfo = () => {
  display.value = false
  api.faceCompare(faceCompareInfo).then(res => {
    if (res.data.code === 0) {
      ElMessage.success('人脸比对成功')
      Object.assign(compareResult, res.data.data)
      let a = res.data.data.confidence
      let b = res.data.data.faceInfo.faceScoreA
      let c = res.data.data.faceInfo.faceScoreB
      textA.value.length = 0
      textB.value.length = 0
      textA.value.push('人脸得分：'+b.toFixed(2))
      textA.value.push('相似度：'+a.toFixed(2)+'%')
      textB.value.push('人脸得分：'+c.toFixed(2))
      textB.value.push('相似度：'+a.toFixed(2)+'%')

      display.value = true
    } else {
      ElMessage.error(res.data.message)
    }
  })
}


</script>

<template>
  <div style="float: left;margin-right: 50px">
    <span>人脸数据图片A：</span>
    <el-upload
        id="avatar-uploader"
        :show-file-list="false"
        :before-upload="beforeAvatarUploadA"
    >
      <img v-if="faceCompareInfo.imageBase64A" :src="faceCompareInfo.imageBase64A" width="100" height="100"/>
      <el-icon v-else id="avatar-uploader-icon">
        <Plus/>
      </el-icon>
    </el-upload>
  </div>
  <div>
    <span>人脸数据图片B：</span>
    <el-upload
        id="avatar-uploader"
        :show-file-list="false"
        :before-upload="beforeAvatarUploadB"
    >
      <img v-if="faceCompareInfo.imageBase64B" :src="faceCompareInfo.imageBase64B" width="100" height="100"/>
      <el-icon v-else id="avatar-uploader-icon">
        <Plus/>
      </el-icon>
    </el-upload>
  </div>
  <br>
  <span>人脸质量分数阈值(推荐值 0 ):&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
  <el-slider v-model="faceCompareInfo.faceScoreThreshold" show-input/>
  <br>
  是否响应人脸信息：
  <el-radio-group v-model="faceCompareInfo.needFaceInfo">
    <el-radio :value='true' border>true</el-radio>
    <el-radio :value='false' border>false</el-radio>
  </el-radio-group>
  <br> <br>
  <el-button type="primary" @click="compareInfo" style="width: 300px"> 比对</el-button>
  <br>
  <br>
  <span v-if="display">
  <RectImage  :face-image="faceCompareInfo.imageBase64A" :text="textA" :rect="compareResult.faceInfo.locationA"/>
  <RectImage :face-image="faceCompareInfo.imageBase64B"  :text="textB" :rect="compareResult.faceInfo.locationB"/>
  </span>
</template>
<style scoped>
span {
  float: left;
}

.el-slider {
  max-width: 600px;
  display: flex;
  align-items: center;
}

#avatar-uploader {
  width: 100px;
  height: 100px;
  display: block;

  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

#avatar-uploader:hover {
  border-color: var(--el-color-primary);
}

#avatar-uploader-icon {
  font-size: 28px;
  color: #949494;
  width: 100px;
  height: 100px;
  text-align: center;
}


</style>